$border-color = darken($color-block, 8)
$tbr = 4px

div.tabs
  display: block
  position: relative
  margin-top: $gap-block
  margin-bottom: $gap-block
  border-radius: $tbr
  background: $color-card
  border: 1px solid $border-color
  .highlight,p,ul,ol
    margin-top: $gap-p
    margin-bottom: $gap-p

div.tabs
  ul.nav-tabs
    display: flex
    overflow-x: auto
    white-space: nowrap
    justify-content: flex-start
    margin: 0 !important
    padding: 8px 8px 0 8px
    background: $color-block
    border-radius: $tbr $tbr 0 0
    li.tab
      list-style-type: none
      a
        display: block
        border-radius: $tbr $tbr 0 0
        padding: $gap * 0.5
        text-align: center
        font-size: $fontsize-meta
        line-height: inherit
        font-weight: bold
        color: $color-meta
        border: 1px solid transparent
        &:hover
          color: $color-p
      &.active a
        cursor: default
        color: $color-p
        background: $color-card
        border: 1px solid $border-color
        border-bottom: 1px solid $color-card

  .tab-content
    border-top: 1px solid $border-color
    margin-top: -1px
    .tab-pane
      padding: $gap-p $gap
      &:not(.active)
        display: none
      &.active
        display: block
        // &:nth-of-type(1)
        //   border-radius: 0 $tbr $tbr $tbr
